<template>
  <div class="userManagement-container">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input v-model.trim="queryForm.userName" clearable placeholder="请输入学生姓名" />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-table border :height="height" v-loading="listLoading" :data="Dpmentlist" :element-loading-text="elementLoadingText">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-descriptions v-if="props.row.orderStatus == 2" title="订单信息" :column="3" border>
            <el-descriptions-item label="学生姓名">{{ props.row.userName }}</el-descriptions-item>
            <el-descriptions-item label="区域">{{ props.row.areaName }}</el-descriptions-item>
            <el-descriptions-item label="初中学校">{{ props.row.schoolName }}</el-descriptions-item>
            <el-descriptions-item label="语文成绩">
              <el-tag size="small" type="success">
                {{ props.row.chinese }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="英语成绩">
              <el-tag size="small" type="success">
                {{ props.row.english }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="数学成绩">
              <el-tag size="small" type="success">
                {{ props.row.math }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="物理成绩">
              <el-tag size="small" type="success">
                {{ props.row.physics }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="化学成绩">
              <el-tag size="small" type="success">
                {{ props.row.chemistry }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="历史成绩">
              <el-tag size="small" type="success">
                {{ props.row.history }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="地理成绩">
              <el-tag size="small" type="success">
                {{ props.row.geography }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="生物成绩">
              <el-tag size="small" type="success">
                {{ props.row.organism }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="体育成绩">
              <el-tag size="small" type="success">
                {{ props.row.pe }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="道德与法治成绩">
              <el-tag size="small" type="success">
                {{ props.row.law }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="总分">
              <el-tag size="small" type="success">
                {{ props.row.totalscore }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="是否指标生">
              <el-tag size="small" :type="props.row.isTarget == 1 ? 'success' : 'warning'">
                {{ props.row.isTarget == 1 ? '是' : '否' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="平行学校志愿A">
              <el-tag size="small" type="primary">
                {{ props.row.tzschoolA }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="平行学校志愿B">
              <el-tag size="small" type="primary">
                {{ props.row.tzschoolB }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="平行学校志愿C">
              <el-tag size="small" type="primary">
                {{ props.row.tzschoolC }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="指标到校志愿A">
              <el-tag size="small" type="primary">
                {{ props.row.zbschoolA }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="指标到校志愿B">
              <el-tag size="small" type="primary">
                {{ props.row.zbschoolB }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="指标统调志愿A">
              <el-tag size="small" type="primary">
                {{ props.row.zbtschoolA }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="指标统调志愿B">
              <el-tag size="small" type="primary">
                {{ props.row.zbtschoolB }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="订单说明">{{ props.row.memo }}</el-descriptions-item>
            <el-descriptions-item label="订单创建时间">{{ props.row.createTime }}</el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column label="用户ID" align="center" prop="userId" width="70" />
      <el-table-column label="学生姓名" align="center" prop="userName" width="100" />
      <el-table-column label="家长姓名" align="center" prop="parentName" width="100" />
      <el-table-column label="电话号" align="center" prop="userTel" width="100" />
      <el-table-column label="订单说明" prop="memo" />
      <el-table-column label="订单ID" align="center" prop="orderId" width="210" />
      <el-table-column label="订单金额" prop="total" width="180" align="center" />
      <el-table-column label="订单状态" width="180">
        <template slot-scope="scope">
          <el-tag :type="scope.row.orderStatus == 2 ? 'success' : 'warning'" size="medium">
            {{ scope.row.orderStatus == 2 ? '已支付' : '待支付' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { SelUserPaymentRecords } from '@/api/userManagement'

  export default {
    name: 'UserManagement',
    data() {
      return {
        listLoading: true,
        total: 0,
        Dpmentlist: [],
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNum: 1,
          pageSize: 20,
          userName: '',
        },
        timeOutID: null,
      }
    },
    computed: {
      height() {
        return this.$baseTableHeight()
      },
    },

    created() {
      this.fetchData()
    },

    beforeDestroy() {
      clearTimeout(this.timeOutID)
    },
    methods: {
      queryData() {
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        try {
          const { data } = await SelUserPaymentRecords(this.queryForm)
          this.Dpmentlist = data.records
          this.total = data.total
          this.timeOutID = setTimeout(() => {
            this.listLoading = false
          }, 300)
        } catch (error) {
          this.listLoading = false
        }
      },
    },
  }
</script>
<style scoped lang="scss">
  .userManagement-container {
    ::v-deep .el-descriptions {
      padding: 20px;
      box-sizing: border-box;
    }
  }
</style>
